<?php
$this->title = '主页';
$per_url = Yii::$app->params['imgurl'];
$this->registerCssFile('@web/css/dropload.css');
$this->registerCss('
    body{background: #fff;margin:0px;padding:0px;}
    .mui-bar-nav {
        -webkit-box-shadow: unset;
        box-shadow: unset !important;
    }
    .myheader a{color:#333;}
    .cate-block p{color:#fff;margin-bottom:0px}
    .swiper-pagination-bullet-active {
        background: #fff !important;
    }
    .swiper-pagination-bullets{
        bottom:0px !important;
    }
    .swiper-pagination{
        text-align:left !important;
    }
    .product-list{margin: 0px 15px 5px 15px;}
    .product-list ul{padding: 0px;margin: 0px}
    .product-list ul li{list-style: none;overflow: hidden;}
    .product-list ul li a{display: block;}
    .product-list li a {
        width: 30%;
        margin-right: 5%;
        float: left;
        text-decoration: none;
    }
    .product-list li a img {
        width: 100%;
        display: block;
        border: 1px solid #E6E6E6;
        border-radius: 6px;
    }
    .product-list li a h3{
        text-align: center;
        font-size: 12px;
        line-height:32px;
        color:#333;
        margin: 0;
        padding: 0;
        border: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
    .product-list li a:nth-child(3n) {
        margin-right: 0;
    }
    .product-list-header{
        overflow: hidden;
        line-height: 47px;
    }
    .product-list-header h3{
        font-size: 16px;
        line-height: 1;
        float: left;
        margin-top: 15px;
        padding-left: 15px;
        position: relative;
        color:#333;
    }
    .product-list-header h3:after {
        content: "";
        position: absolute;
        width: 2.5px;
        height: 17.5px;
        left: 0;
        top: 50%;
        background-color: #333;
        border-radius: 5px;
        margin-top: -9px;
    }   
    .product-list-header p {
        float: right;
        color: #4c4c4c;
        font-size: 11px;
        margin:0px;
    }
    .zhanwei{width:100%;height:45px;}
    .banner{height:225px;margin: 15px;position: relative}
    .banner-item{width:100%;height:100%;border-radius: 6px;box-shadow: 0 0 6px #ccc;}
    .cate-block{margin:15px;}
    .cate-item-big{height:95px;margin: 0 -15px;padding:0px 15px}
    .cate-item-big .myicon{font-size: 30px;}
    .cate-item-small{height:40px;background: #74cc92;margin-left:-15px;border-radius: 6px;box-shadow: 0 0 6px #fff;text-align: center;padding: 9px 0px}
    .cate-item-small.mtop{margin-top: 15px;}
    .cate-item-small span{margin-right: 10px;}
    .gedang{width:100%;height:15px;background-color: #f7f7f7;}
    .cate-block a{text-decoration:none}
    ul, ol {
        list-style: none;
        margin: 0;
        padding: 0;
        border: 0;
        color: #333333;
        font-size: 14px;
    }
    .product_list_ol li {
        padding: 15px;
        background-color: #FFFFFF;
        border-bottom: 1px solid #F4F4F4;
        overflow: hidden;
    }
    .product_list_ol_div {
        float: left;
        width: 74%;
        margin-left: 4%;
    }
    .product_list_ol li img {
        float: left;
        width: 22%;
        border: 1px solid #E6E6E6;
        border-radius: 6px;
    }
    .product_list_ol_div h3 {
        line-height: 32px;
        font-size: 16px;
        margin: 0;
        padding: 0;
        border: 0;
        color: #333333;
    }
    .product_list_ol_tex {
        font-size: 12px;
        font-weight:300;
        color: #333;
        margin: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
');
?>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
<div id="page-home" style="margin-bottom: 60px;">

    <header id="myheader" class="mui-bar mui-bar-nav">
        <a href="#menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" style="color: #333;"></a>
        <h1 class="mui-title">51漫社</h1>
        <a href="#" id="search" class="mui-icon mui-action-menu mui-icon-search mui-pull-right" style="color: #333;"></a>
    </header>
    <div class="zhanwei"></div>

    <?php if($bannerlist){ ?>
    <div class="banner">
        <div class="swiper-wrapper">
            <?php foreach($bannerlist as $v){ ?>
                <div class="swiper-slide">
                    <?php if(!empty($v['url'])){ ?>
                        <a href="<?=$v['url']?>">
                            <div class="banner-item" style="background: url(<?=$per_url . $v['img_path']?>) no-repeat center;background-size: cover;"></div>
                        </a>
                    <?php }else{ ?>
                        <a href="#">
                            <div class="banner-item" style="background: url(<?=$per_url . $v['img_path']?>) no-repeat center;background-size: cover;"></div>
                        </a>
                    <?php }?>
                </div>
            <?php }?>
        </div>
        <div class="swiper-pagination" style="z-index: 1;"></div>
    </div>
    <?php }?>

    <div class="cate-block">

        <div class="row">
            <div class="col-xs-4">
                <div class="cate-item-big">
                    <div style="background: #e17c83;width:100%;height:100%;border-radius: 6px;box-shadow: 0 0 6px #fff;text-align: center;padding:16px 0px">
                        <a href="/touch/default/ranking-list">
                            <p class="myicon"><span class="glyphicon glyphicon-heart-empty"></span></p>
                            <p>排行榜</p>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="cate-item-small">
                    <a href="/touch/default/cate">
                        <p><span class="glyphicon glyphicon-tags"></span>分类</p>
                    </a>
                </div>
                <div class="cate-item-small mtop" style="background: #e2864a">
                    <a href="/touch/default/more-list?type=new">
                        <p><span class="glyphicon glyphicon-book"></span>免费</p>
                    </a>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="cate-item-small" style="background: #7bcadb">
                    <a href="/touch/default/favorite">
                        <p><span class="glyphicon glyphicon-folder-open"></span>收藏</p>
                    </a>
                </div>
                <div class="cate-item-small mtop" style="background: #e5b768">
                    <a href="/touch/default/rechange/">
                        <p><span class="glyphicon glyphicon-yen"></span>充值</p>
                    </a>
                </div>
            </div>
        </div>

    </div>

    <div class="gedang"></div>

    <style>
        .lianzai-banner .swiper-slide{
            text-align: center;
            background: #fff;
            width: 120px;
        }
        .lianzai-banner{
            width: 100%;
            height: 200px;
            margin: 10px auto;
        }
        .lianzai-banner h3{
            text-align: center;
            font-size: 12px;
            line-height:32px;
            color:#333;
            margin: 0;
            padding: 0;
            border: 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
        }
        .lianzai-banner .remark{
            position: absolute;
            top:0px;
            left:0px;
            background-color: rgba(0,0,0,.8);
            color:#fff;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 6px 0px 6px 0px;
        }
    </style>
    <div class="lianzai" style="margin: 0px 15px 5px 15px;">
        <div class="product-list-header">
            <h3>连载中</h3>
        </div>

        <div class="swiper-container lianzai-banner">
            <div class="swiper-wrapper">
                <?php foreach($lianzai_list as $v){ ?>
                    <div class="swiper-slide">
                        <a href="/book-item/<?=$v['number']?>.html">
                            <div style="position: relative">
                                <img src="/img/120-160.png" style=" background:url(<?=$per_url . $v['thumb_img']?>); background-size:cover;border: 1px solid #E6E6E6;border-radius: 6px;">
                                <h3><?=$v['front_title']?></h3>
                                <?php if( $m = $v->getLastBook() ){ ?>
                                    <div class="remark">
                                        更新至<?=$m['front_title']?>
                                    </div>
                                <?php }?>
                            </div>
                        </a>
                    </div>
                <?php }?>
            </div>
            <!-- Add Scrollbar -->
            <div class="swiper-scrollbar"></div>
        </div>

    </div>

    <div class="gedang"></div>
    <div class="sec-one product-list">
        <div class="product-list-header" style="">
            <h3>新品发布</h3>
            <p onclick="location.href='/touch/default/more-list?type=new'">
                more <span class="glyphicon glyphicon-plus"></span>
            </p>
        </div>
        <ul>
            <li>
                <?php foreach($new_list as $v){ ?>
                    <a href="/book-item/<?=$v['number']?>.html">
                        <img src="/img/120-160.png" style=" background:url(<?=$per_url . $v['thumb_img']?>); background-size:cover">
                        <h3><?=$v['front_title']?></h3>
                    </a>
                <?php }?>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>

    <div class="gedang"></div>
    <div class="sec-two product-list">
        <div class="product-list-header" style="">
            <h3>强烈推荐</h3>
            <p onclick="location.href='/touch/default/more-list?type=recommend'">
                more <span class="glyphicon glyphicon-plus"></span>
            </p>
        </div>
        <ul>
            <li>
                <?php foreach($recommend_list as $v){ ?>
                    <a href="/book-item/<?=$v['number']?>.html">
                        <img src="/img/120-160.png" style=" background:url(<?=$per_url . $v['thumb_img']?>); background-size:cover">
                        <h3><?=$v['front_title']?></h3>
                    </a>
                <?php }?>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>


    <?php if($over_list){ ?>
    <div class="gedang"></div>
    <div class="sec-three product-list">
        <div class="product-list-header" style="">
            <h3>经典完结</h3>
            <p onclick="location.href='/touch/default/more-list?type=over'">
                more <span class="glyphicon glyphicon-plus"></span>
            </p>
        </div>
        <ul>
            <li>
                <?php foreach($over_list as $v){ ?>
                    <a href="/book-item/<?=$v['number']?>.html">
                        <img src="/img/120-160.png" style=" background:url(<?=$per_url . $v['thumb_img']?>); background-size:cover">
                        <h3><?=$v['front_title']?></h3>
                    </a>
                <?php }?>
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>
    <?php }?>

    <?php if($free_list){ ?>
    <div class="gedang"></div>
    <div class="sec-four product-list">
        <div class="product-list-header" style="">
            <h3>免费漫画</h3>
            <p onclick="location.href='/touch/default/more-list?type=free'">
                more <span class="glyphicon glyphicon-plus"></span>
            </p>
        </div>
        <ul>
            <li>
                <?php foreach($free_list as $k=>$v){ ?>
                    <?php if($k < 3){ ?>
                        <a href="/book-item/<?=$v['number']?>.html">
                            <img src="/img/120-160.png" style=" background:url(<?=$per_url . $v['thumb_img']?>); background-size:cover">
                            <h3><?=$v['front_title']?></h3>
                        </a>
                    <?php }?>
                <?php }?>
            </li>
        </ul>
        <!--        <div class="clearfix"></div>-->
        <ol class="product_list_ol">
            <?php foreach($free_list as $k=>$v){ ?>
                <?php if($k > 2){ ?>
                    <li>
                        <img src="/img/120-160.png" style=" background:url(<?=$per_url . $v['thumb_img']?>); background-size:cover">
                        <div class="product_list_ol_div">
                            <h3><?=$v['front_title']?></h3>
                            <p class="product_list_ol_tex"><?=$v['intro']?></p>
                            <p class="product_list_ol_div_btm" style="text-align: right;margin-top: 20px;">
                                <span style="padding: 1px 8px;border:1px solid #333;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;font-size: 12px;color:#333">已完结</span>
                            </p>
                        </div>
                    </li>
                <?php }?>
            <?php }?>
        </ol>
    </div>
    <?php }?>
</div>
<div style="position: fixed;top:25%;left:0px;width:36px;background: #333;padding: 10px;z-index:999;border-radius: 6px">
    <a href="/touch/default/download" style="color:#fff;">安卓下载</a>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script>
    var mySwiper = new Swiper('.banner',{
        autoplay: 2500,
        effect: 'fade',
        pagination : '.swiper-pagination',
    });

    var swiper2 = new Swiper('.lianzai-banner', {
        scrollbar: '.swiper-scrollbar',
        scrollbarHide: true,
        slidesPerView: 'auto',
        centeredSlides: false,
        spaceBetween: 30,
        grabCursor: true
    });
    $('#search').click(function(){
        window.location.href='/touch/default/search'
    });
</script>

